<template>
  <div id="rich"></div>
</template>

<script setup>
import china from "./china.json";
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  echarts.registerMap("china", china);
  myEchart = echarts.init(myRich, null, {
    locale: "ZH",
  });
  let option = {
    tooltip: {},
    visualMap: {
      min: 0,
      max: 40,
      left: "right",
      bottom: 100,
      text: ['40度', '0度'],
      inRange: {
        color: [
          "#313695",
          "#4575b4",
          "#74add1",
          "#abd9e9",
          "#e0f3f8",
          "#ffffbf",
          "#fee090",
          "#fdae61",
          "#f46d43",
          "#d73027",
          "#a50026",
        ],
      },
    }, // 视觉组件 一般配合热力图或者地图，根据数值显示不同的颜色
    series: [
      {
        type: "map",
        map: "china",
        roam: true,
        scaleLimit: {
          // 缩放限制
          min: 1,
          max: 6,
        },
        zoom: 1, // 默认缩放比例
        width: 600,
        height: 600,
        label: {
          show: true,
        },
        itemStyle: {
          areaColor: "pink",
        },
        emphasis: {
          itemStyle: {
            areaColor: "red",
          },
        },
        nameMap: {
          // 山西省: "sx",
        },
        data: [
          {
            name: "北京市",
            value: 30,
          },
          {
            name: "山西省",
            value: 12,
          },
        ],
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 600px;
}
</style>
